<template>
  <el-space spacer="-">
    <el-input v-model="label" size="small" />
    <el-input v-model="value" size="small" />
  </el-space>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';

  const props = defineProps<{
    modelValue?: Record<string, string>;
  }>();

  const emit = defineEmits(['update:modelValue']);

  const label = computed<string>({
    get: () => {
      return props.modelValue?.label || '';
    },
    set: (v: string) => {
      emit('update:modelValue', {
        ...props.modelValue,
        label: v
      });
    }
  });

  const value = computed<string>({
    get: () => {
      return props.modelValue?.value || '';
    },
    set: (v: string) => {
      emit('update:modelValue', {
        ...props.modelValue,
        value: v
      });
    }
  });
</script>
